<template>
  <div :class="itemClasses">
    <div :class="headerClasses" @click="toggle" class="row">
      <slot></slot>
      <div class="arrowIcon"><img src="../../assets/img/arrow.svg" :style="style"/></div>
    </div>
    <div :class="contentClasses" v-show="isActive">
      <div :class="boxClasses"><slot name="content"></slot></div>
    </div>
  </div>
</template>
<script>
  const prefixCls = 'ivu-collapse';

  export default {
    name: 'EhbPanel',
    props: {
      name: {
        type: String
      },
      hideArrow: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        index: 0, // use index for default when name is null
        isActive: false,
        mounted: false,
        style:"transform: rotate(0deg);",
        direction:0
      };
    },
    computed: {
      itemClasses () {
        return [
          `${prefixCls}-item`,
          {
            [`${prefixCls}-item-active`]: this.isActive
          }
        ];
      },
      headerClasses () {
        return `${prefixCls}-header`;
      },
      contentClasses () {
        return `${prefixCls}-content`;
      },
      boxClasses () {
        return `${prefixCls}-content-box`;
      }
    },
    methods: {
      toggle () {
        if(this.direction==0){
          this.style="transform: rotate(90deg);";
          this.direction=90;
        }else{
          this.style="transform: rotate(0deg);";
          this.direction=0;
        }
        this.$parent.toggle({
          name: this.name || this.index,
          isActive: this.isActive
        });
      }
    },
    mounted () {
      this.mounted = true;
    }
  };
</script>
